<template>
  <div class="dt-talk-memore por">
    <ul>
      <li>
        <dl class="dt-group-name">
          <dt>
            <h4>群聊名称</h4>
            <i v-if="groupInfo.groupUid == uid" class="el-icon-edit-outline" @click="openGroupNameEdit"></i>
          </dt>
          <dd>
            <div class="dt-text-overflow">{{ groupName }}</div>
          </dd>
        </dl>
        <dl class="dt-group-intro">
          <dt>
            <h4>简介</h4>
          </dt>
          <dd @click="openGroupIntroEdit">
            <div v-show="briefIntroduction" class="dt-text-overflow">{{ briefIntroduction }}</div>
            <div v-show="!briefIntroduction" class="dt-noData">未设置</div>
            <div class="dt-icon-right">
              <i class="el-icon-arrow-right"></i>
            </div>
          </dd>
        </dl>
      </li>
      <li v-if="groupInfo.groupType == 2">
        <div class="dt-set-box">
          <h4>置顶群聊</h4>
          <el-switch v-model="isPinned" @change="changePinned" active-color="#2f54eb" inactive-color="#e1e6f0" :width="44"> </el-switch>
        </div>
        <div class="dt-set-box">
          <h4>消息免打扰</h4>
          <el-switch v-model="noDisturbing" @change="changeNoDisturbing" active-color="#2f54eb" inactive-color="#e1e6f0" :width="44"> </el-switch>
        </div>
      </li>
      <li v-if="groupInfo.groupUid == uid">
        <div class="dt-set-groupMember" @click="openTransfer">
          <h4>转让群主</h4>
          <div class="dt-icon-right">
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <div class="dt-set-groupMember" @click="openMaster">
          <h4>设置群管理员</h4>
          <div class="dt-icon-right">
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
      </li>
      <li v-if="groupInfo.groupUid == uid" class="dt-button-operate dt-quit-group">
        <el-button type="text" @click="dissolveBox">解散群聊</el-button>
      </li>
      <li v-if="groupInfo.groupUid != uid" class="dt-button-operate dt-quit-group"><el-button type="text" @click="quitBox">退出群聊</el-button></li>
    </ul>
    <!-- 编辑群名称 -->
    <el-dialog
      :visible.sync="groupNameVisible"
      top="36vh"
      :append-to-body="true"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      class="dt-groupName-box"
      title="编辑群名称"
      width="420px"
      :show-close="false"
    >
      <el-form :model="groupNameRuleForm" :rules="groupNameRules" ref="groupNameRule" label-position="top">
        <el-form-item prop="groupName" label="群名称">
          <el-input v-model="groupNameRuleForm.groupName" :maxlength="20" show-word-limit autocomplete="off" placeholder="请输入群名称" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" type="primary" @click="submitFormGroupName('groupNameRule')">确定</el-button>
        <el-button size="medium" @click="resetFormGroupName('groupNameRule')">取消</el-button>
      </div>
    </el-dialog>
    <!-- 编辑群名称end -->
    <!-- 编辑简介 -->
    <el-dialog
      :visible.sync="groupIntroVisible"
      top="28vh"
      :append-to-body="true"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      class="dt-groupIntro-box"
      title="编辑简介"
      width="680px"
      :show-close="false"
    >
      <el-form :model="groupIntroRuleForm" :rules="groupIntroRules" ref="groupIntroRule">
        <el-form-item prop="groupIntro" label="简介">
          <el-input
            type="textarea"
            placeholder="请输入群简介，500字以内"
            v-model="groupIntroRuleForm.groupIntro"
            maxlength="500"
            show-word-limit
            @focus="focusTextarea(1)"
            @blur="blurTextarea(1)"
            :class="{ 'is-focus': textareaFocus[1] }"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" type="primary" @click="submitFormGroupIntro('groupIntroRule')">确定</el-button>
        <el-button size="medium" @click="resetFormGroupIntro('groupIntroRule')">取消</el-button>
      </div>
    </el-dialog>
    <!-- 编辑简介end -->

    <!-- 查看简介 -->
    <el-dialog
      :visible.sync="isShowGroupIntro"
      top="28vh"
      :append-to-body="true"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      class="dt-groupIntro"
      title="简介"
      width="680px"
      >{{ groupIntroRuleForm.groupIntro }}</el-dialog
    >
    <!-- 查看简介end -->

    <!-- 转让群主 -->
    <el-dialog
      :visible.sync="transferVisible"
      top="36vh"
      :append-to-body="true"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      class="dt-groupName-box dt-group"
      title="转让群主"
      width="420px"
      :show-close="false"
    >
      <el-form label-position="top">
        <el-form-item prop="groupTransfer" label="设置群主" :class="{ 'is-error': transferIsError }">
          <!--群成员-转让-->
          <PublicSelectGroupUser
            class="dt-mt5"
            :option="optGroupTransfer"
            @select="selectUser($event, 'groupTransfer')"
            @delete="deleteUser($event, 'groupTransfer')"
          />
          <div v-show="transferIsError" class="el-form-item__error">请选择群主</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" type="primary" @click="submitTransferBox">确定</el-button>
        <el-button size="medium" @click="closeTransfer">取消</el-button>
      </div>
    </el-dialog>
    <!-- 转让群主end -->

    <!-- 设置群管理员 -->
    <el-dialog
      :visible.sync="setMasterVisible"
      top="36vh"
      :append-to-body="true"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      class="dt-groupName-box dt-group"
      title="设置管理员"
      width="420px"
      :show-close="false"
    >
      <el-form label-position="top">
        <el-form-item prop="groupSetMaster" label="设置管理员" :class="{ 'is-error': masterIsError }">
          <!-- 群成员-设置管理员 -->
          <PublicSelectGroupUser
            class="dt-mt5"
            :option="optGroupSetMaster"
            @select="selectUser($event, 'groupSetMaster')"
            @delete="deleteUser($event, 'groupSetMaster')"
          />
          <div v-show="masterIsError" class="el-form-item__error">请设置管理员</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" type="primary" @click="submitMasterBox">确定</el-button>
        <el-button size="medium" @click="closeMaster">取消</el-button>
      </div>
    </el-dialog>
    <!-- 设置群管理员end -->
  </div>
</template>
<script>
export default {
  props: ['groupInfo', 'groupMember'],
  data() {
    return {
      secret_uid: this.$store.state.uid,
      uid: this.$tools.getDecrypt(this.$store.state.uid), //用户id
      groupName: '',
      briefIntroduction: '',
      groupNameVisible: false,
      groupNameRuleForm: {
        groupName: ''
      },
      groupNameRules: {
        groupName: [
          { required: true, message: '请输入群名称', trigger: 'blur' },
          { min: 1, max: 20, message: '请输入1-20字群名称', trigger: 'blur' }
        ]
      },
      groupIntroVisible: false,
      groupIntroRuleForm: {
        groupIntro: ''
      },
      groupIntroRules: {
        groupIntro: [
          { required: true, message: '请输入群简介，500字以内', trigger: 'blur' },
          { min: 1, max: 500, message: '请输入群简介，1-500字', trigger: 'blur' }
        ]
      },
      textareaFocus: [false, false],
      isShowGroupIntro: false,
      isPinned: false,
      noDisturbing: false,
      transferVisible: false,
      setMasterVisible: false,
      transferId: '',
      transferIsError: false,
      masterId: '',
      masterIsError: false,
      //转让群主选人配置
      optGroupTransfer: {
        width: '380px',
        placeholder: '请选择群主',
        isMultiple: false, //是否多选
        maxSelect: 1, //单选忽略
        //已选的成员列表
        selectedUserList: [],
        //团队成员列表
        groupUserList: [],
        // 1、转让群主2、设置群管理员
        type: 1
      },
      //设置管理员选人配置
      optGroupSetMaster: {
        width: '380px',
        placeholder: '请设置群管理员',
        isMultiple: false, //是否多选
        maxSelect: 3, //单选忽略
        //已选的成员列表
        selectedUserList: [],
        //团队成员列表
        groupUserList: [],
        // 1、转让群主2、设置群管理员
        type: 2
      }
      // groupInfo: {}
    }
  },
  filters: {
    filterDate(val) {
      return val.substring(0, 10)
    },
    filterMemberName(val) {
      return val.length > 6 ? val.substring(0, 6) + '...' : val
    },
    filterLevel(val) {
      var level = [null, '一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
      return level[val] + '级领导'
    }
  },
  computed: {
    query() {
      return this.$tools.getQuery(this)
    }
  },
  methods: {
    chatSetGroupName(name) {
      this.groupName = name
    },
    openGroupNameEdit() {
      this.groupNameVisible = true
    },
    setGroupName() {
      var data = [
          {
            type: 1,
            groupId: this.query.groupId,
            userId: this.uid,
            groupName: this.groupNameRuleForm.groupName,
            briefIntroduction: this.briefIntroduction,
            groupRules: this.groupInfo.groupRule,
            groupRuleAnnex: this.groupInfo.groupRuleAnnex,
            groupRuleAnnexChange: this.groupInfo.groupType,
            groupRuleSetting: this.groupInfo.groupRuleSetting
          }
        ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/updateCustomGroup'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.groupName = this.groupNameRuleForm.groupName
              this.$emit('setGroupName', this.groupNameRuleForm.groupName)
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    submitFormGroupName(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.setGroupName()
          this.groupNameVisible = false
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    resetFormGroupName(formName) {
      this.$refs[formName].resetFields()
      this.groupNameVisible = false
    },
    focusTextarea(index) {
      this.textareaFocus.splice(index, 1, true)
    },
    blurTextarea(index) {
      this.textareaFocus.splice(index, 1, false)
    },
    openGroupIntroEdit() {
      if (this.groupInfo.groupUid == this.uid) {
        this.groupIntroVisible = true
      } else if (this.groupIntroRuleForm.groupIntro) {
        this.isShowGroupIntro = true
      }
    },
    setGroupIntro() {
      var data = [
          {
            type: 2,
            groupId: this.query.groupId,
            userId: this.uid,
            groupName: this.groupName,
            briefIntroduction: this.groupIntroRuleForm.groupIntro,
            groupRules: this.groupInfo.groupRule,
            groupRuleAnnex: this.groupInfo.groupRuleAnnex,
            groupRuleAnnexChange: this.groupInfo.groupType,
            groupRuleSetting: this.groupInfo.groupRuleSetting
          }
        ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/updateCustomGroup'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.briefIntroduction = this.groupIntroRuleForm.groupIntro
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    submitFormGroupIntro(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.setGroupIntro()
          this.groupIntroVisible = false
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    resetFormGroupIntro(formName) {
      this.$refs[formName].resetFields()
      this.groupIntroVisible = false
    },
    changePinned() {
      var data = [{ groupId: this.query.groupId, userId: this.uid, type: this.isPinned ? 1 : 0 }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/groupToTop'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              if (this.isPinned) {
                this.$message({
                  message: '群聊置顶成功',
                  type: 'success',
                  duration: 2000,
                  onClose: () => {}
                })
              } else {
                this.$message({
                  message: '取消群聊置顶',
                  type: 'info',
                  duration: 2000,
                  onClose: () => {}
                })
              }
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    changeNoDisturbing() {
      var data = [{ groupId: this.query.groupId, userId: this.uid, type: this.noDisturbing ? 1 : 0 }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/groupNoDisturb'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              if (this.noDisturbing) {
                this.$message({
                  message: '设置群聊免打扰成功',
                  type: 'success',
                  duration: 2000,
                  onClose: () => {}
                })
              } else {
                this.$message({
                  message: '取消群聊免打扰',
                  type: 'info',
                  duration: 2000,
                  onClose: () => {}
                })
              }
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    openTransfer() {
      this.transferVisible = true
      // this.getGroupMember()
    },
    openMaster() {
      this.setMasterVisible = true
      // this.getGroupMember()
    },
    closeTransfer() {
      this.transferVisible = false
      this.transferId = ''
      this.transferIsError = false
    },
    closeMaster() {
      this.setMasterVisible = false
      this.masterId = ''
      this.masterIsError = false
      this.optGroupSetMaster.selectedUserList = this.groupMember.filter((item) => {
        return item.userRole == 2
      })
    },
    getRealName(userId) {
      var isExistItem = this.optGroupTransfer.groupUserList.filter((item) => {
        return item.userId === parseInt(userId)
      })[0]
      return isExistItem && isExistItem.userName
    },
    selectUser(ids, type) {
      switch (type) {
        case 'groupTransfer':
          console.log(ids)
          this.transferId = ids
          this.transferIsError = false
          break
        case 'groupSetMaster':
          console.log(ids)
          this.masterId = ids
          this.masterIsError = false
          break
      }
    },
    submitTransferBox() {
      if (!this.transferId) {
        if (this.optGroupTransfer.selectedUserList[0]) {
          this.transferId = this.optGroupTransfer.selectedUserList[0].userId
        } else {
          this.transferIsError = true
          return false
        }
      }
      this.$confirm('确定转让群主给 <strong>' + this.getRealName(this.transferId) + '</strong> 吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'dt-button-cancle is-plain',
        type: 'warning',
        showClose: false,
        dangerouslyUseHTMLString: true
      })
        .then(() => {
          this.submitTransfer()
        })
        .catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // })
        })
    },
    submitTransfer() {
      var data = [{ userId: this.uid, newOwnerUid: this.transferId, groupId: this.query.groupId }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/transferGroupOwner'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.$message({
                type: 'success',
                message: '群主转让成功'
              })
              this.transferVisible = false
              // this.getGroupInfo()
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => {}
              })
              this.transferVisible = false
            }
          })
        })
        .catch((error) => {})
    },
    deleteUser(ids, type) {
      switch (type) {
        case 'groupTransfer':
          console.log(ids)
          break
        case 'groupSetMaster':
          console.log(ids)
          this.deleteAdmin(ids)
          break
      }
    },
    deleteAdmin(ids) {
      // if (this.optGroupSetMaster.selectedUserList[0]) {
      //   this.masterId = this.optGroupSetMaster.selectedUserList[0].userId
      // } else {
      //   this.masterId = ''
      // }
      let id = parseInt(ids)
      this.$confirm('确定取消 <strong>' + this.getRealName(id) + '</strong> 群管理员身份吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'dt-button-cancle is-plain',
        type: 'warning',
        showClose: false,
        dangerouslyUseHTMLString: true
      })
        .then(() => {
          this.cancelGroupAdmin(ids)
        })
        .catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // })
        })
    },
    cancelGroupAdmin(ids) {
      var data = [{ userId: this.uid, adminUid: ids, groupId: this.query.groupId }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/cancelGroupAdmin'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.setMasterVisible = false
              this.masterId = ''
              this.optGroupTransfer.selectedUserList.splice(0, 1)
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    submitMasterBox() {
      if (!this.masterId) {
        if (this.optGroupSetMaster.selectedUserList[0]) {
          this.masterId = this.optGroupSetMaster.selectedUserList[0].userId
        } else {
          this.masterIsError = true
          return false
        }
      }
      this.$confirm('确定设置 <strong>' + this.getRealName(this.masterId) + '</strong> 为群管理员吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'dt-button-cancle is-plain',
        type: 'warning',
        showClose: false,
        dangerouslyUseHTMLString: true
      })
        .then(() => {
          this.submitMaster()
        })
        .catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // })
        })
    },
    submitMaster() {
      var data = [{ userId: this.uid, adminUid: this.masterId, groupId: this.query.groupId }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/setGroupAdmin'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.$message({
                type: 'success',
                message: '设置管理员成功'
              })
              this.setMasterVisible = false
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => {}
              })
              this.setMasterVisible = false
            }
          })
        })
        .catch((error) => {})
    },
    dissolveBox() {
      this.$confirm('解散后不可恢复，确定解散该群聊吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'dt-button-cancle is-plain',
        type: 'warning',
        showClose: false
      })
        .then(() => {
          this.dissolveGroup()
        })
        .catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // })
        })
    },
    dissolveGroup() {
      var data = [{ groupId: this.query.groupId, userId: this.uid }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/dissolveCustomGroup'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.$message({
                type: 'success',
                message: '解散成功'
              })
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    quitBox() {
      this.$confirm('确定退出群聊吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'dt-button-cancle is-plain',
        type: 'warning',
        showClose: false
      })
        .then(() => {
          this.quitGroup()
        })
        .catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // })
        })
    },
    quitGroup() {
      var data = [{ groupId: this.query.groupId, userId: this.uid }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/quitCustomGroup'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              // this.$router.push({ path: '/main/#/pc?tab=chat' })
              // this.$emit('getGroupList')
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    }
  },
  mounted() {
    var timer = setInterval(() => {
      if (this.$socket) {
        clearInterval(timer)

        this.$socket.on('custom_group_totop', (data) => {
          var _data = JSON.parse(data)

          if (_data.toTop == 0) {
            this.isPinned = false
          } else {
            this.isPinned = true
          }
          // console.log(_data, 'top')
        })
        this.$socket.on('custom_group_noDisturb', (data) => {
          var _data = JSON.parse(data)
          if (_data.noDisturb == 0) {
            this.noDisturbing = false
          } else {
            this.noDisturbing = true
          }
          // console.log(_data, 'no')
        })
      }
    }, 10)
  },
  watch: {
    groupInfo(groupInfo, olds) {
      this.groupName = groupInfo.groupName
      this.groupName = groupInfo.groupName
      this.briefIntroduction = groupInfo.briefIntroduction
      this.groupNameRuleForm.groupName = groupInfo.groupName
      this.groupIntroRuleForm.groupIntro = groupInfo.briefIntroduction
      this.isPinned = groupInfo.toTop ? true : false
      this.noDisturbing = groupInfo.noDisturb ? true : false
      this.groupInfo = groupInfo
    },
    groupMember(groupMember, olds) {
      this.optGroupTransfer.groupUserList = groupMember.filter((item) => {
        return item.userId
      })
      // this.optGroupTransfer.selectedUserList = groupMember.filter((item) => {
      //   return item.userRole == 1
      // })
      this.optGroupSetMaster.groupUserList = groupMember.filter((item) => {
        return item.userId
      })
      this.optGroupSetMaster.selectedUserList = groupMember.filter((item) => {
        return item.userRole == 2
      })
    }
  }
}
</script>
<style scoped>
.dt-mt5 {
  margin-top: 5px;
}
.dt-talk-memore {
  display: flex;
  flex-direction: column;
  flex: 1;
  border-left: 1px solid #e1e6f0;
}
.dt-group-name .el-icon-edit-outline {
  font-size: 16px;
  color: #2f54eb;
  font-weight: bold;
  cursor: pointer;
}
.dt-talk-memore h4 {
  font-weight: normal;
  color: #1f1f1f;
  line-height: 22px;
}
.dt-talk-memore li {
  padding: 0px 16px;
  border-bottom: 1px solid #e9eef7;
  padding-bottom: 16px;
}
.dt-talk-memore .dt-quit-group {
  border-bottom: none;
}
.dt-group-intro {
  cursor: pointer;
}
.dt-talk-memore dt,
.dt-talk-memore dd,
.dt-set-box,
.dt-set-groupMember {
  display: -webkit-flex;
  display: flex;
  flex: 1;
  -webkit-flex-direction: row;
  flex-direction: row;
  justify-content: space-between;
  color: #909399;
  line-height: 22px;
}
.dt-talk-memore dt {
  margin-top: 16px;
  margin-bottom: 4px;
}
.dt-set-groupMember {
  margin-top: 16px;
  cursor: pointer;
}
.dt-talk-memore dd .dt-icon-right,
.dt-set-groupMember .dt-icon-right {
  display: -webkit-flex;
  display: flex;
  /* flex: 1; */
  align-items: center;
}
.dt-set-box {
  margin-top: 16px;
}
.dt-set-box >>> .el-switch__core:after {
  width: 18px;
  height: 18px;
}
.dt-set-box >>> .el-switch__core {
  height: 22px;
}
.dt-set-box >>> .el-switch.is-checked .el-switch__core::after {
  margin-left: -19px;
}
.dt-button-operate {
  text-align: center;
}

.dt-talk-memore .el-button {
  margin-top: 16px;
  padding: 0px;
  color: #f5222d;
}
.dt-noData {
  color: #c0c4cc;
}
.dt-text-overflow {
  /* // 设置只能显示三行文字，超出部分不显示 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  /* 设置换行 */
  word-break: break-all;
  /* 强制换行 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* 群名弹窗 */
.dt-groupName-box >>> .el-input__inner {
  height: 36px;
  line-height: 36px;
}
.dt-groupName-box >>> .el-dialog__header {
  padding-top: 18px;
  padding-bottom: 4px;
}
.dt-groupName-box >>> .el-form-item__label {
  line-height: 26px;
  padding-bottom: 0px;
}
.dt-groupName-box >>> .el-dialog__body {
  padding: 0px 20px;
}
.dt-groupName-box >>> .el-form-item__content {
  line-height: 26px;
}
.dt-groupName-box .el-input {
  margin-top: 4px;
}
.dt-groupName-box >>> .el-dialog__footer {
  padding-top: 0px;
  padding-bottom: 16px;
}
.dt-groupName-box >>> .el-dialog__footer .el-button {
  padding: 9px 19px;
  font-size: 12px;
}
/* 简介 */
.dt-groupIntro-box >>> .is-error .el-textarea {
  border: #f5222d solid 1px;
}
.dt-groupIntro-box .el-textarea {
  width: 540px;
}
.dt-groupIntro-box >>> .el-form-item__label {
  margin-right: 48px;
}
.dt-groupIntro-box >>> .el-textarea__inner {
  height: 106px;
}
.dt-groupIntro-box >>> .el-form-item__error {
  left: 98px;
}
.dt-groupIntro-box >>> .el-dialog__body {
  padding-top: 5px;
  padding-bottom: 0px;
}
.dt-groupIntro-box >>> .el-form-item__label {
  line-height: 32px;
}
.dt-groupIntro-box >>> .el-dialog__footer {
  padding-top: 14px;
  padding-bottom: 14px;
  border-top: 1px solid #e9eef7;
}
.dt-groupIntro-box >>> .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:after {
  color: #fff;
}
.dt-groupIntro >>> .el-dialog__header {
  border-bottom: 1px solid #e9eef7;
  padding-bottom: 18px;
}
.dt-groupIntro >>> .el-dialog__body {
  padding-top: 20px;
  line-height: 22px;
  height: 300px;
  overflow: auto;
}
.dt-groupName-box >>> .dt-select .el-select-dropdown {
  width: 560px;
}
.dt-groupName-box >>> .dt-select-search input {
  width: 470px;
}
.dt-groupName-box >>> .dt-select-search i {
  top: 9px;
}
.dt-groupName-box >>> .dt-del-user {
  top: 4px;
}
.dt-group >>> .el-input__suffix {
  top: 3px;
}
.dt-group >>> .dt-select .el-input.is-reverse .el-icon-arrow-up {
  transform: rotate(0deg) translateY(-6px) !important;
}
.dt-group >>> .el-form-item__label::after {
  content: '*';
  color: #f5222d;
  margin-left: 4px;
}
/* .el-message-box__status.el-icon-warning {
  color: #faad14;
} */
.dt-groupIntro-box >>> .el-icon-close:before,
.dt-groupIntro >>> .el-icon-close:before {
  line-height: 24px;
}
</style>
